<template>
  <div>
    <!-- 模板解析时会自动读取count的value属性 -->
    <h2>count: {{count}}</h2>

    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">

import {
  ref
} from 'vue'
export default {
  name: 'About',

  // 所有的响应式API和组合API都在此调用
  setup() {
    console.log('setup', this)  // this是undefined, 不能通过this来更新数据
    // 创建一个ref响应式数据
    const count = ref(2)
    console.log('count', count)

    const update = () => {
      count.value += 1
    }

    return {  // 对象中的所有函数模板都可以直接访问
      count,
      update
    }
  }
  
}
</script>

<style scoped>

</style>
